<template>
    <view class="llq-container">
        <scroll-view 
            class="list" 
            :scroll-y="true" 
            @scrolltolower="loadMore"
            :refresher-enabled="true" 
            :refresher-triggered="refresherTriggered" 
            @refresherrefresh="onRefresherRefresh" 
            refresher-background="#f5f5f5"
        >

            <!-- 占位符：当数据加载中且没有数据时显示（仅首次加载） -->
            <view v-if="listLoading && communityList.length === 0 && !refresherTriggered" class="post-placeholder">
                <view class="post-card white-box" v-for="i in 3" :key="i">
                    <view class="flex user-info">
                        <view class="placeholder-avatar"></view>
                        <view style="width: 100%;">
                            <view class="flex start user-name">
                                <view class="placeholder-line name"></view>
                            </view>
                            <view class="flex start">
                                <view class="placeholder-line time"></view>
                            </view>
                        </view>
                    </view>
                    <view class="placeholder-line content"></view>
                    <view class="placeholder-line content short"></view>
                    <view class="flex between actions">
                        <view class="placeholder-line action"></view>
                        <view class="placeholder-line action"></view>
                        <view class="placeholder-line action"></view>
                    </view>
                    <view class="placeholder-line input"></view>
                </view>
            </view>
            <!-- 真实数据 -->
            <view class="post-card white-box" v-for="(item, index) in communityList" :key="index" v-if="communityList.length > 0">
                <view class="flex user-info">
                    <image :src="item.member.userpic" class="avatar"></image>
                    <view style="width: 100%;">
                        <view class="flex start user-name">
                            <view class="font32 fontbold-500">{{ item.member.nickname }}</view>
                        </view>
                        <view class="flex start">
                            <view class="font24 grey margin20" v-if="item.location">{{ item.location }}</view>
                            <view class="time font24">{{ item.create_time }}</view>
                        </view>
                    </view>
                </view>
                <view class="post-text font28">{{ item.content }}</view>
                <view class="flex start post-images" 
                    v-if="item.images && item.images.length"
                    :class="[item.images.length == 1 ? 'post-images1' : '']"    
                >
                    <view class="image" v-for="(img, imgIndex) in item.images" :key="imgIndex">
                         <image :src="img" mode="aspectFill"></image>
                    </view>
                </view>
                <view class="flex between actions">
                    <view class="flex center action-item"> 
                        <u-icon name="share-square" color="#333333" size="35rpx"></u-icon>
                        <text class="font24">{{ item.share_count }}</text>
                    </view>
                    <view class="flex start">
                        <view class="flex center action-item" @click="toggleLike(index, item)">
                            <u-icon :name="item.is_liked ? 'thumb-up-fill' : 'thumb-up'" :color="item.is_liked ? '#fc0808' : '#333333'" size="35rpx"></u-icon>
                            <text class="font24">{{ item.like_count }}</text>
                        </view>
                        <view class="flex center action-item" @click="toggleCollect(index, item)">
                            <u-icon :name="item.is_collected ?'star-fill' : 'star'" :color="item.is_collected ? '#fcfb08' : '#333333'" size="35rpx"></u-icon>
                            <text class="font24">{{ item.collect_count }}</text>
                        </view>
                        <view class="flex center action-item" @click="openCommentPopup(item)">
                             <u-icon name="chat" color="#333333" size="35rpx"></u-icon>
                             <text class="font24">{{ item.comment_count }}</text>
                         </view>
                    </view>
                </view>
                <view class="fake-input" @click="openComment(index, 0)">
                    <u-textarea class="textarea" v-model="item.commentDraft" placeholder="Hi! 说点什么吧" height="68rpx" :auto-height="true"></u-textarea>
                </view>
            </view>
            
            <!-- 列表底部提示 -->
            <view class="list-footer">
                <text v-if="listLoading">正在加载...</text>
                <text v-else-if="!listHasMore">已经加载全部</text>
            </view>
        </scroll-view>

        <view class="float-write flex center" @click="handleWrite" 
            :style="{ bottom: writeBottomPx + 'px' }"
            @touchstart="onWriteTouchStart"
            @touchmove.prevent="onWriteTouchMove"
        >
            <span class="iconfont icon-bianji write-icon"></span>
        </view>

        <!-- 评论弹窗组件 -->
        <comment-pop 
            :show="commentPopupShow" 
            :postId="currentPostId" 
            :commentCount="currentPostCommentsTotal"
            :noCommentList="noCommentList"
            :commentList="commentList"
            :commentTotal="commentTotal"
            :commentHasMore="commentHasMore"
            :commentLoading="commentLoading"
            :replyLoadingMap="replyLoadingMap"
            :keyboardHeight="keyboardHeight"
            :postOwnerName="currentPostOwnerName"
            @close="closeCommentPopup"
            @comment-added="onCommentAdded"
            @load-more-comments="loadMoreComments"
            @reply-to-comment="replyToComment"
            @toggle-replies="toggleReplies"
            @send-comment="handleSendComment"
            @keyboard-height-change="onKeyboardHeightChange"
        />
    </view>
</template>
<script>
import { 
    getCommunityList,
    postCommunityLike,
    postCommunityUnlike, 
    postCommunityCollect, 
    postCommunityUncollect,
    getCommunityCommentList,
    postCommunityCommentCreate,
    getCommunityCommentReplies
} from '@/api/index.js'
import CommentPop from '@/components/comment-pop/index.vue'
export default {
    name: 'llq',
    components: {
        CommentPop
    },
    data() {
        return {
            communityList: [],
            // 列表分页与加载状态
            listPage: 1,
            listLimit: 10,
            listHasMore: true,
            listLoading: false,
            // 弹窗评论分页
            currentPostId: null,
            commentPopupShow: false,
            currentPostCommentsTotal: 0,
            // 输入框相关
            commentValue: '',
            activeIndex: -1,
            // 可拖动的发布按钮（仅上下）
            writeBottomPx:  uni.upx2px ? uni.upx2px(308) : 200,
            _writeDragStartY: 0,
            _writeDragStartBottom: 0,
            noCommentList: false,
            // 下拉刷新相关
            refresherTriggered: false,
            lastRefreshTime: 0,
            refreshDebounceTime: 2000,
            // 评论相关数据
            commentList: [],
            commentTotal: 0,
            commentPage: 1,
            commentLimit: 10,
            commentHasMore: true,
            commentLoading: false,
            // 回复相关
            replyLoadingMap: {},
            loadedRepliesMap: {},
            replyPageMap: {},
            // 键盘高度
            keyboardHeight: 0,
            keyword:'',
            // 当前帖子发布者名字
            currentPostOwnerName: '',
        }
    },
    mounted() {
        this.getCommunityListEven()
        this.$on('search', (keyword) => {
            this.keyword = keyword
            this.listPage = 1
            this.listHasMore = true
            this.communityList = []
            this.getCommunityListEven()
        })
    },
    methods: {
        onRefresherRefresh() {
            // 防止重复触发刷新或在加载中再次刷新
            if (this.listLoading || this.refresherTriggered) {
                return
            }
            this.refresherTriggered = true
            this.refreshData()
        },
        
        refreshData() {
            // 重置所有状态
            this.listPage = 1
            this.listHasMore = true
            // 不清空数据，保持原有数据显示，等新数据加载完成后再替换
            
            // 加载数据
            this.getCommunityListEven()
        },
        
        closeMask() {
            this.commentPopupShow = false
        },
        handleWrite() {
            uni.navigateTo({ url: '/views/community/release' })
        },
        openComment(index, type) {
            // 来自帖子下方的只读文本域
            this.activeIndex = index
            this.commentValue = this.communityList[index].commentDraft || ''
            this.commentPopupShow = true
            this.noCommentList = true
            
            // 设置当前帖子ID，确保直接评论时有正确的post_id
            this.currentPostId = this.communityList[index].id
            // 设置当前帖子发布者名字
            this.currentPostOwnerName = this.communityList[index].member?.nickname || ''
        },
        openCommentPopup(item) {
            this.noCommentList = false
            this.commentPopupShow = true
            this.currentPostCommentsTotal = item.comment_count
            this.currentPostId = item.id
            // 设置当前帖子发布者名字
            this.currentPostOwnerName = item.member?.nickname || ''
            
            // 初始化评论数据
            this.commentTotal = item.comment_count
            this.commentPage = 1
            this.commentHasMore = true
            this.commentList = []
            this.replyLoadingMap = {}
            this.loadedRepliesMap = {}
            this.replyPageMap = {}
            
            // 获取评论列表
            this.getCommentList()
        },
        
        // 关闭评论弹窗
        closeCommentPopup() {
            this.commentPopupShow = false
            // 重置评论相关状态
            this.commentList = []
            this.commentTotal = 0
            this.commentPage = 1
            this.commentHasMore = true
            this.commentLoading = false
            this.replyLoadingMap = {}
            this.loadedRepliesMap = {}
            this.replyPageMap = {}
            this.keyboardHeight = 0
        },
        
        // 评论添加成功后的回调
        onCommentAdded() {
            // 更新主贴评论数
            if (this.currentPostId) {
                this.incrementPostCommentCount(this.currentPostId)
            }
        },

        // 加载更多评论
        loadMoreComments() {
            this.getCommentList()
        },

        // 回复评论
        replyToComment(comment) {
            // 如果是回复二级评论，需要确保其父评论的回复列表已加载
            if (!comment.member) {
                // 这是二级评论，需要找到其父评论并确保回复列表已加载
                this.ensureParentCommentRepliesLoaded(comment)
            }
        },

        // 切换回复展开状态
        toggleReplies(comment) {
            if (this.replyLoadingMap[comment.id]) return
            
            if (comment.expanded) {
                if (this.replyPageMap[comment.id] && 
                    this.loadedRepliesMap[comment.id] && 
                    this.loadedRepliesMap[comment.id].length < comment.reply_count) {
                    this.loadReplies(comment)
                    return
                }
                this.$set(comment, 'expanded', false)
                return
            }
            
            if (this.loadedRepliesMap[comment.id] && this.loadedRepliesMap[comment.id].length > 0) {
                this.$set(comment, 'expanded', true)
                this.$set(comment, 'replies', this.loadedRepliesMap[comment.id])
                return
            }
            
            this.$set(comment, 'expanded', true)
            this.$set(comment, 'replies', [])
            this.loadReplies(comment)
        },

        // 处理发送评论
        handleSendComment(data) {
            const { content, parentId } = data
            
            uni.showToast({ icon: 'loading' })
            
            postCommunityCommentCreate({
                post_id: this.currentPostId,
                content: content,
                parent_id: parentId
            }).then((res) => {
                uni.hideToast()
                if (res && res.errno === 0) {
                    uni.showToast({ title: '已发送', icon: 'none' })
                    
                    // 本地插入新评论数据
                    this.insertNewCommentLocally(res.data.comment_id, content, parentId)
                    
                    // 更新主贴评论数
                    this.onCommentAdded()
                }
            }).catch(() => {
                uni.hideToast()
                uni.showToast({ title: '发送失败', icon: 'none' })
            })
        },

        // 键盘高度变化
        onKeyboardHeightChange(height) {
            this.keyboardHeight = height
        },

        // 获取评论列表
        getCommentList() {
            if (this.commentLoading || !this.commentHasMore) return
            
            this.commentLoading = true
            getCommunityCommentList({
                id: this.currentPostId,
                page: this.commentPage,
                limit: this.commentLimit
            }).then((res) => {
                if (res && res.errno === 0) {
                    const list = res.data?.list || []
                    
                    // 为每条评论添加本地状态字段
                    const processedList = list.map((item) => {
                        if (typeof item.expanded === 'undefined') {
                            item.expanded = false
                        }
                        if (typeof item.replies === 'undefined') {
                            item.replies = []
                        }
                        return item
                    })
                    
                    if (this.commentPage === 1) {
                        this.commentList = processedList
                    } else {
                        this.commentList = this.commentList.concat(processedList)
                    }
                    
                    // 判断是否还有更多
                    const total = res.data?.pagination?.total
                    if (typeof total === 'number') {
                        this.commentHasMore = this.commentList.length < total
                    } else {
                        this.commentHasMore = list.length >= this.commentLimit
                    }
                    
                    if (this.commentHasMore) {
                        this.commentPage += 1
                    }
                }
            }).finally(() => {
                this.commentLoading = false
            })
        },

        // 加载回复
        loadReplies(comment) {
            if (this.replyLoadingMap[comment.id]) return
            
            const commentId = comment.id
            const page = this.replyPageMap[commentId] || 1
            
            this.$set(this.replyLoadingMap, commentId, true)
            
            getCommunityCommentReplies({
                id: commentId,
                page: page,
                limit: 10
            }).then((res) => {
                if (res.errno === 0) {
                    const newReplies = res.data?.list || []
                    const total = res.data?.total || 0
                    
                    if (page === 1) {
                        const existingLocalReplies = this.loadedRepliesMap[commentId] || []
                        const localReplies = existingLocalReplies.filter(reply => reply.isLocalInsert)
                        
                        const filteredServerReplies = newReplies.filter(serverReply => {
                            return !localReplies.some(localReply => localReply.id === serverReply.id)
                        })
                        
                        this.loadedRepliesMap[commentId] = [...localReplies, ...filteredServerReplies]
                        this.$set(comment, 'replies', [...this.loadedRepliesMap[commentId]])
                    } else {
                        const existingReplies = this.loadedRepliesMap[commentId] || []
                        const existingIds = existingReplies.map(reply => reply.id)
                        
                        const filteredNewReplies = newReplies.filter(serverReply => {
                            return !existingIds.includes(serverReply.id)
                        })
                        
                        this.loadedRepliesMap[commentId] = existingReplies.concat(filteredNewReplies)
                        this.$set(comment, 'replies', [...this.loadedRepliesMap[commentId]])
                    }
                    
                    if (this.loadedRepliesMap[commentId].length < total) {
                        this.replyPageMap[commentId] = page + 1
                    } else {
                        delete this.replyPageMap[commentId]
                    }
                    
                    this.$set(comment, 'expanded', true)
                }
            }).catch((err) => {
                console.error('加载回复失败:', err)
                uni.showToast({ title: '加载回复失败', icon: 'none' })
            }).finally(() => {
                this.$set(this.replyLoadingMap, commentId, false)
            })
        },

        // 确保父评论的回复列表已加载
        ensureParentCommentRepliesLoaded(replyComment) {
            // 在commentList中查找包含该回复的一级评论
            for (const comment of this.commentList) {
                if (comment.replies && comment.replies.length > 0) {
                    const foundReply = comment.replies.find(reply => reply.id === replyComment.id)
                    if (foundReply) {
                        // 找到父评论，确保其回复列表已加载到loadedRepliesMap中
                        if (!this.loadedRepliesMap[comment.id]) {
                            this.loadedRepliesMap[comment.id] = [...comment.replies]
                        }
                        break
                    }
                }
            }
            
            // 如果还是没有找到，尝试强制加载
            if (Object.keys(this.loadedRepliesMap).length === 0) {
                // 遍历所有有回复的评论，强制加载回复列表
                for (const comment of this.commentList) {
                    if (comment.reply_count > 0 && !this.loadedRepliesMap[comment.id]) {
                        this.loadReplies(comment)
                    }
                }
            }
        },

        // 本地插入新评论
        insertNewCommentLocally(commentId, content, parentId) {
            const userInfo = this.$store.state.userInfo
            const currentTime = new Date().toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            }).replace(/\//g, '-')
            
            if (parentId === 0) {
                // 一级评论
                const newComment = {
                    id: commentId,
                    content: content,
                    create_time: currentTime,
                    member: {
                        nickname: userInfo?.nickname || '用户'
                    },
                    userpic: userInfo?.userpic || '/static/mine/title-icon.png',
                    reply_count: 0,
                    expanded: false,
                    replies: []
                }
                
                this.commentList.unshift(newComment)
                this.commentTotal += 1
                
            } else {
                // 二级回复：需要找到对应的父评论
                let parentComment = null
                let replyToComment = null
                
                // 首先尝试在commentList中查找（回复一级评论的情况）
                parentComment = this.commentList.find(comment => comment.id === parentId)
                
                if (parentComment) {
                    // 回复一级评论
                    replyToComment = parentComment
                } else {
                    // 回复二级评论，需要在所有已加载的回复中查找
                    for (const firstLevelCommentId in this.loadedRepliesMap) {
                        const replies = this.loadedRepliesMap[firstLevelCommentId] || []
                        const foundReply = replies.find(reply => reply.id === parentId)
                        if (foundReply) {
                            // 找到被回复的二级评论，其父评论就是firstLevelCommentId对应的评论
                            parentComment = this.commentList.find(comment => comment.id === firstLevelCommentId)
                            replyToComment = foundReply
                            break
                        }
                    }
                    
                    // 如果还是没找到，尝试在commentList的replies中查找
                    if (!parentComment) {
                        for (const comment of this.commentList) {
                            if (comment.replies && comment.replies.length > 0) {
                                const foundReply = comment.replies.find(reply => reply.id === parentId)
                                if (foundReply) {
                                    parentComment = comment
                                    replyToComment = foundReply
                                    break
                                }
                            }
                        }
                    }
                }
                
                if (parentComment) {
                    // 创建二级回复数据结构
                    const newReply = {
                        id: commentId,
                        content: content,
                        update_time: currentTime,
                        current_member: {
                            nickname: userInfo?.nickname || '用户'
                        },
                        userpic: userInfo?.userpic || '/static/mine/title-icon.png',
                        reply_member: {
                            nickname: replyToComment ? replyToComment.current_member?.nickname : parentComment.member?.nickname || '用户'
                        },
                        post_id: this.currentPostId,
                        isLocalInsert: true
                    }
                    
                    // 确保父评论有replies数组
                    if (!parentComment.replies) {
                        this.$set(parentComment, 'replies', [])
                    }
                    
                    // 获取当前的replies数组
                    const currentReplies = [...(this.loadedRepliesMap[parentComment.id] || [])]
                    
                    // 找到被回复的评论在数组中的位置
                    let insertIndex = currentReplies.length
                    if (replyToComment) {
                        const replyIndex = currentReplies.findIndex(reply => reply.id === replyToComment.id)
                        if (replyIndex !== -1) {
                            // 插入到被回复的评论下面
                            insertIndex = replyIndex + 1
                        }
                    }
                    
                    // 在指定位置插入新回复
                    currentReplies.splice(insertIndex, 0, newReply)
                    
                    // 更新loadedRepliesMap
                    this.loadedRepliesMap[parentComment.id] = currentReplies
                    
                    // 更新父评论的replies数组
                    this.$set(parentComment, 'replies', [...currentReplies])
                    
                    // 更新回复数量
                    this.$set(parentComment, 'reply_count', (parentComment.reply_count || 0) + 1)
                    
                    // 更新评论总数（二级回复也算作评论）
                    this.commentTotal += 1
                    
                    // 如果父评论还没有展开，自动展开
                    if (!parentComment.expanded) {
                        this.$set(parentComment, 'expanded', true)
                    }
                    
                    // 管理分页状态
                    const totalLoadedReplies = this.loadedRepliesMap[parentComment.id].length
                    const totalReplyCount = parentComment.reply_count
                    
                    if (totalLoadedReplies >= totalReplyCount) {
                        delete this.replyPageMap[parentComment.id]
                    } else if (!this.replyPageMap[parentComment.id]) {
                        this.$set(this.replyPageMap, parentComment.id, 1)
                    }
                }
            }
        },

        onTyping(e) {
            // 同步输入到对应帖子的只读文本域
            var val = (e && e.detail && typeof e.detail.value !== 'undefined') ? e.detail.value : this.commentValue
            this.commentValue = val
            if (this.activeIndex > -1) {
                // 同步到帖子下方的只读文本域
                this.$set(this.communityList[this.activeIndex], 'commentDraft', val)
            }
        },
        handleSend() {
            var content = this.commentValue.trim()
            if (!content) {
                uni.showToast({ title: '请输入内容', icon: 'none' })
                return
            }
            
            if (this.activeIndex < 0 || !this.communityList[this.activeIndex]) {
                uni.showToast({ title: '无效的帖子', icon: 'none' })
                return
            }
            
            // 评论功能已移至弹窗，这里暂时提示用户
            uni.showToast({ title: '评论功能已移至弹窗', icon: 'none' })
            
            // 清空输入
            this.commentValue = ''
        },

        getCommunityListEven() {
            if (this.listLoading || !this.listHasMore) return
            this.listLoading = true
            var that = this
            getCommunityList({
                page: this.listPage,
                limit: this.listLimit,
                keyword: this.keyword || ''
            }).then(function(res){  
                if (res && res.errno === 0) {
                    res.data.list = res.data.list.map((item) => {
                        // 后端可能返回字符串/空/null/数组，统一为数组
                        let imgs = []
                        const raw = item.images
                        if (Array.isArray(raw)) {
                            imgs = raw
                        } else if (typeof raw === 'string') {
                            const s = raw.trim()
                            if (s) {
                                try {
                                    const parsed = JSON.parse(s)
                                    if (Array.isArray(parsed)) imgs = parsed
                                } catch (e) {
                                    // 非JSON字符串，尝试逗号分隔
                                    imgs = s.includes(',') ? s.split(',').map(x => x.trim()).filter(Boolean) : (s ? [s] : [])
                                }
                            }
                        }
                        item.images = imgs
                        return item
                    })
                    var list = (res.data && res.data.list) ? res.data.list : []
                    // 兼容每条数据需要的本地字段
                    list = list.map(function(item){
                        if (typeof item.commentDraft === 'undefined') item.commentDraft = ''
                        return item
                    })
                    if (that.listPage === 1) {
                        that.communityList = list
                    } else {
                        that.communityList = that.communityList.concat(list)
                    }
                    // 判断是否还有更多
                    var total = (res.data && res.data.pagination && res.data.pagination.total) ? res.data.pagination.total : undefined
                    if (typeof total === 'number') {
                        that.listHasMore = that.communityList.length < total
                    } else {
                        // fallback：按返回条数判断
                        that.listHasMore = list.length >= that.listLimit
                    }
                    if (that.listHasMore) that.listPage += 1
                }
            }).finally(function(){
                that.listLoading = false
                // 重置下拉刷新状态
                that.refresherTriggered = false
            })
        },
        loadMore() {
            if (this.listLoading) return
            if (!this.listHasMore) {
                uni.showToast({ title: '已经加载完全部了', icon: 'none' })
                return
            }
            this.getCommunityListEven()
        },
        toggleLike(index, item) {
            if (!item) return
            var that = this
            if (item.is_liked) {
                postCommunityUnlike(item.id).then(function(res){
                    if (res && res.errno === 0) {
                        that.$set(that.communityList[index], 'is_liked', false)
                        var count = Number(that.communityList[index].like_count || 0)
                        that.$set(that.communityList[index], 'like_count', Math.max(0, count - 1))
                    }
                })
            } else {
                postCommunityLike(item.id).then(function(res){
                    if (res && res.errno === 0) {
                        that.$set(that.communityList[index], 'is_liked', true)
                        var count2 = Number(that.communityList[index].like_count || 0)
                        that.$set(that.communityList[index], 'like_count', count2 + 1)
                    }
                })
            }
        },
        toggleCollect(index, item) {
            if (!item) return
            var that = this
            if (item.is_collected) {
                postCommunityUncollect(item.id).then(function(res){
                    if (res && res.errno === 0) {
                        that.$set(that.communityList[index], 'is_collected', false)
                        var count = Number(that.communityList[index].collect_count || 0)
                        that.$set(that.communityList[index], 'collect_count', Math.max(0, count - 1))
                    }
                })
            } else {
                postCommunityCollect(item.id).then(function(res){
                    if (res && res.errno === 0) {
                        that.$set(that.communityList[index], 'is_collected', true)
                        var count2 = Number(that.communityList[index].collect_count || 0)
                        that.$set(that.communityList[index], 'collect_count', count2 + 1)
                    }
                })
            }
        },
        incrementPostCommentCount(postId) {
            if (!postId) return
            var idx = this.communityList.findIndex(function(x){ return x && x.id === postId })
            if (idx >= 0) {
                var count = Number(this.communityList[idx].comment_count || 0)
                this.$set(this.communityList[idx], 'comment_count', count + 1)
            }
        },
        onWriteTouchStart(e) {
            var touch = e && e.touches && e.touches[0]
            if (!touch) return
            this._writeDragStartY = touch.clientY
            this._writeDragStartBottom = this.writeBottomPx
        },
        onWriteTouchMove(e) {
            var touch = e && e.touches && e.touches[0]
            if (!touch) return
            var delta = touch.clientY - this._writeDragStartY
            var nextBottom = this._writeDragStartBottom - delta
            var sys = uni.getSystemInfoSync ? uni.getSystemInfoSync() : { windowHeight: 667 }
            var btnH = uni.upx2px ? uni.upx2px(100) : 60
            // 限制范围：0 到 窗口高度 - 按钮高度 - 20px 顶部留白
            var minBottom = 0
            var maxBottom = Math.max(0, (sys.windowHeight || 667) - btnH - 20)
            if (nextBottom < minBottom) nextBottom = minBottom
            if (nextBottom > maxBottom) nextBottom = maxBottom
            if (nextBottom < 80 || nextBottom > 400) return;
            this.writeBottomPx = nextBottom
        }
    }
}
</script>

<style lang="scss" scoped>
.llq-container {
    width: 100%;
    height: 100%;

    .margin32 {
		margin: 0 32rpx;
	}
    .margin20 {
        margin-right: 20rpx;
    }

    .list {
        background: #fff;
        height: 100%;
    }

    .list-footer {
        padding: 20rpx 0 40rpx;
        text-align: center;
        color: #999;
        font-size: 24rpx;
    }

    .white-box {
        border-radius: 16rpx;
        padding: 0 0 24rpx;
        box-sizing: border-box;
        margin: 0 32rpx 0;

        &:nth-child(1) {
            padding-top: 24rpx;
        }
    }

    .post-card {
        .user-info { margin-bottom: 16rpx; }
        .avatar { width: 96rpx; height: 96rpx; border-radius: 50%; margin-right: 20rpx; flex-shrink: 0; }
        .user-name { margin-bottom: 8rpx; }
        .time { color: $uni-text-color-grey; }
        .grey { color: $uni-text-color-grey; }
        .post-text { line-height: 1.6; margin: 28rpx 0; color: $uni-text-color; }
        .post-images {
             flex-wrap: wrap;
             .image { 
                 width: calc((100% - 24rpx * 2) / 3); 
                 height: 222rpx; 
                 border-radius: 8rpx; 
                 margin-right: 16rpx; 
                 margin-bottom: 16rpx;
                 overflow: hidden;
                 
                 image {
                     width: 100%;
                     height: 100%;
                     display: block;
                 }
             }
             .image:nth-child(3n) { margin-right: 0; }
         }
         .post-images1 {
              .image {
                   width: 100% !important;
                   height: 360rpx !important;
                   margin-right: 0 !important;
                   
                   image {
                       width: 100%;
                       height: 100%;
                       display: block;
                   }
               }
           }
        .actions {
            margin-top: 8rpx;
            .action-item { margin-left: 36rpx; color: #333333; }
            .action-item:first-child { margin-left: 0; }
            .action-item i { margin-right: 8rpx; color: $uni-text-color; }
        }
        .fake-input {
            margin-top: 20rpx;
            min-height: 68rpx;
            border-radius: 6rpx;
        }
        .textarea {
            padding: 12rpx 24rpx;
            box-sizing: border-box;
            background: #F6F6F6;
            border-radius: 16rpx;
        }
        .fake-input .placeholder { color: $uni-text-color-grey; font-size: 26rpx; }
        .fake-input .value { color: $uni-text-color; font-size: 26rpx; }
    }

    .post-placeholder {
        .post-card {
            .placeholder-avatar {
                width: 96rpx;
                height: 96rpx;
                border-radius: 50%;
                background: #f0f0f0;
                margin-right: 20rpx;
                flex-shrink: 0;
                animation: placeholder-pulse 1.5s ease-in-out infinite;
            }
            
            .placeholder-line {
                height: 16rpx;
                background: #f0f0f0;
                border-radius: 8rpx;
                margin-bottom: 8rpx;
                animation: placeholder-pulse 1.5s ease-in-out infinite;
                
                &.name {
                    width: 120rpx;
                    height: 32rpx;
                    margin-bottom: 8rpx;
                }
                
                &.time {
                    width: 80rpx;
                    height: 24rpx;
                }
                
                &.content {
                    width: 100%;
                    height: 28rpx;
                    margin: 28rpx 0 8rpx;
                    
                    &.short {
                        width: 60%;
                    }
                }
                
                &.action {
                    width: 60rpx;
                    height: 24rpx;
                    margin-left: 36rpx;
                    
                    &:first-child {
                        margin-left: 0;
                    }
                }
                
                &.input {
                    width: 100%;
                    height: 68rpx;
                    margin-top: 20rpx;
                    border-radius: 16rpx;
                }
            }
        }
    }

    @keyframes placeholder-pulse {
        0%, 100% {
            opacity: 0.6;
        }
        50% {
            opacity: 1;
        }
    }

    .float-write {
        position: fixed;
        right: 20rpx;
        bottom: 308rpx;
        width: 100rpx;
        height: 100rpx;
        background: #eff9ff;
        color: #fff;
        border-radius: 50%;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;

        .write-icon {
            color: #0DA3FF;
            font-size: 45rpx;
        }
    }


}
</style>